﻿@{
    ViewBag.Title = "Sly";
}

@section head{
    <link href="~/Scripts/libs/jquery-plugins/sly/demo.css" rel="stylesheet" />

    <style type="text/css">
        body
        {
            background-color:azure; 
        }

        #mode 
        { 
            margin: 20px 0; 
            text-align: center; 
        }

        #mode li
        {
            cursor: pointer;
        }

        .sly li > hr
        {
            border:1px solid white;
        }

        .top-panel
        {
            float:none; 
            position:absolute; 
            left:0px; 
            top:0px; 
            border:0px;
            margin:0px;
            width:99%; 
            background-color:blue; 
            color:white;
            padding:5px;
            visibility:hidden;
            z-index:1001; 
        }

        .top-shadow
        {
            height:0px;
            visibility:hidden;
        }

        #mode
        {
            position:absolute; 
            z-index:1001; 
        }

        .modules{  
            overflow:auto;
            background:#fafafa;  
        }  

        .modules ul{  
            list-style:none;  
            margin:0;  
            padding:0px;  
        }  

        .modules li{  
            display:inline;  
            float:left;  
            margin:10px;  
        }

        .zone
        {
        }

        .module
        {
            width:200px;
            height:200px;
            color:red;
            background-color:azure;
            margin:5px;
            border:2px;
        }

        .item{  
            display:block;  
            text-decoration:none;
        }  

        .item img{  
            border:1px solid #333;  
        }  

        .item p{  
            margin:0;  
            font-weight:bold;  
            text-align:center;  
            color:#c3c3c3;  
        }
    </style>
}

<div class="top-panel">
    <div class="easyui-tabs">
        <div class="setting" title="Setting"> 
            Setting 
        </div>
        <div class="modules" title="Modules">  
            <ul>  
                <li>  
                    <a href="#" class="item">  
                        <img src="~/Images/Thumbnails/doc.png"/>  
                        <div>  
                            <p>Balloon</p>  
                            <p>Price:$25</p>  
                        </div>  
                    </a>  
                </li>  
                <li>  
                    <a href="#" class="item">  
                        <img src="~/Images/Thumbnails/flow.png"/>  
                        <div>  
                            <p>Feeling</p>  
                            <p>Price:$25</p>  
                        </div>  
                    </a>  
                </li>  
                <li>  
                    <a href="#" class="item">  
                        <img src="~/Images/Thumbnails/org.png"/>  
                        <div>  
                            <p>Elephant</p>  
                            <p>Price:$25</p>  
                        </div>  
                    </a>  
                </li>  
                <li>  
                    <a href="#" class="item">  
                        <img src="~/Images/Thumbnails/setting.png"/>  
                        <div>  
                            <p>Stamps</p>  
                            <p>Price:$25</p>  
                        </div>  
                    </a>  
                </li>
                <li>  
                    <a href="#" class="item">  
                        <img src="~/Images/Thumbnails/setting.png"/>  
                        <div>  
                            <p>Stamps</p>  
                            <p>Price:$25</p>  
                        </div>  
                    </a>  
                </li>
                <li>  
                    <a href="#" class="item">  
                        <img src="~/Images/Thumbnails/setting.png"/>  
                        <div>  
                            <p>Stamps</p>  
                            <p>Price:$25</p>  
                        </div>  
                    </a>  
                </li>
                <li>  
                    <a href="#" class="item">  
                        <img src="~/Images/Thumbnails/setting.png"/>  
                        <div>  
                            <p>Stamps</p>  
                            <p>Price:$25</p>  
                        </div>  
                    </a>  
                </li>
                <li>  
                    <a href="#" class="item">  
                        <img src="~/Images/Thumbnails/setting.png"/>  
                        <div>  
                            <p>Stamps</p>  
                            <p>Price:$25</p>  
                        </div>  
                    </a>  
                </li>
            </ul>  
        </div>
    </div>
</div>
<div class="top-shadow"></div>

<div class="slyWrap example1" response-for="children()" style="background-color:lightblue;">

    <ul id="mode" style="background-color:green; float:left; padding:5px; ">
        <li class="maximize">+</li>
        <li class="restore">=</li>
        <li class="minimize">-</li>

        <li class="tip">?</li>
    </ul>

	<div class="scrollbar">
		<div class="handle"></div>
	</div>

    <div class="sly small" response-mode="small" style="height:50px;" data-options='{ "horizontal": 1, "itemNav": "basic", "dragHandle": 1, "dragging": 1, "startAt": 3, "scrollBy": 1 }'>
		<ul>
            <li>
                System
            </li>
            <li>
                Organization
            </li>
            <li>
                Workflow
            </li>
		</ul>
	</div>

	<div class="sly middle" response-mode="middle" style="height:200px;" data-options='{ "horizontal": 1, "itemNav": "basic", "dragHandle": 1, "dragging": 1, "startAt": 3, "scrollBy": 1 }'>
		<ul>
            <li>
                System
                <hr />
            </li>
            <li>
                Organization
                <hr />
            </li>
            <li>
                Workflow
                <hr />
            </li>
		</ul>
	</div>

    <div class="large portal" response-mode="large" style="height:300px; background-color:purple" >
        <ul class="zone inline">

        </ul>
    </div>
</div>

@section scripts{
    <script src="~/Scripts/libs/jquery-plugins/sly/jquery.sly.js"></script>
    <script src="~/Scripts/libs/jquery-plugins/jquery.hcsticky-min.js"></script>

    <script type="text/javascript">
        /*global prettyPrint:false */
        jQuery(function ($) {
            // Call sly instances
            $(".slyWrap").each(function (i, element) {

                var $cont = $(element),
                    $frame = $cont.find(".sly"),
                    $slidee = $frame.find("ul"),
                    $scrollbar = $cont.find(".scrollbar"),
                    options = $frame.data("options"),

                    $controls = $cont.find(".controls"),
                    $prevButton = $controls.find(".prev"),
                    $nextButton = $controls.find(".next"),
                    $prevPageButton = $controls.find(".prevPage"),
                    $nextPageButton = $controls.find(".nextPage");

                $.extend(options, {
                    scrollBar: $scrollbar,

                    prev: $prevButton,
                    next: $nextButton,
                    prevPage: $prevPageButton,
                    nextPage: $nextPageButton,
                    disabledClass: 'btn-disabled'
                });

                // Call sly
                $frame.sly(options);
            });

            $(".middle").hide();
            $(".large").hide();

            // new Function("return this.children()").call($(".example1")).length

            $("[response-for]").resize(function () {
                var me = $(this);
                var selector = me.attr("response-for");
                var mode = me.attr("response-mode");

                new Function("return this." + selector + ";").call(me).each(function () {
                    var _me = $(this);

                    var _mode = _me.attr("response-mode");

                    if (_mode) {
                        if (_mode == mode) {
                            _me.show();
                        } else {
                            _me.hide();
                        }
                    }
                });
            });

            $("#mode li.maximize").click(function () {
                $(".example1").attr("response-mode", "large");
                $(".example1").css("height", 800);
            });

            $("#mode li.restore").click(function () {
                $(".example1").attr("response-mode", "middle");
                $(".example1").css("height", 400);
            });

            $("#mode li.minimize").click(function () {
                $(".example1").attr("response-mode", "small");
                $(".example1").css("height", 100);
            });

            $("#mode li.tip").click(function () {
                if ($(".top-panel").css("visibility") === "hidden") {
                    $(".top-panel").css("visibility", "visible");
                    $(".top-shadow").height($(".top-panel").height());
                } else {
                    $(".top-panel").css("visibility", "hidden");
                    $(".top-shadow").height(0);
                }
            });

            $('#mode').hcSticky({
                top: 100,
                bottomEnd: 100
            });

            //$('.top-panel').hcSticky({
            //    top: 100,
            //    bottomEnd: 100
            //});

            $('.item').draggable({
                revert: true,
                proxy: 'clone',
                onStartDrag: function () {
                    $(this).draggable('options').cursor = 'not-allowed';
                    $(this).draggable('proxy').css('z-index', 10).css('background-color', 'red');
                },
                onStopDrag: function () {
                    $(this).draggable('options').cursor = 'move';
                }
            });

            $('.portal').droppable({
                onDragEnter: function (e, source) {
                    $(source).draggable('options').cursor = 'auto';
                },
                onDragLeave: function (e, source) {
                    $(source).draggable('options').cursor = 'not-allowed';
                },
                onDragOver: function (e, source) {

                },
                onDrop: function (e, source) {
                    var name = $(source).find('p:eq(0)').html();
                    var price = $(source).find('p:eq(1)').html();

                    // add module
                    $('.zone').append('<li class="module">' + name + '</li>');

                    $(source).css('background-color', 'gray');
                    $(source).hide();
                }
            });
        });
    </script>
}
